<template>
  <Basic>
    <!-- 内容区域 -->
    <div class="continer w">
      <div class="part_title">{{ ArticleInfo.title }}</div>
      <div class="part_decoration">
        <img src="@/assets/img/xhx_01.jpg" alt="" />
      </div>
      <div class="articleAuthor">{{ ArticleInfo.author }}</div>
      <div class="careateTime">创建时间：{{ ArticleInfo.createdAt }}</div>
      <div v-html="ArticleInfo.content" class="articleBody"></div>
    </div>
    <div class="tools">
      <a href="javascript:button_click();"> </a>
      <div class="tools_item like">
        <a href="javascript:button_click();">
          <div class="tools_icon">
            <i class="like_icon fa fa-thumbs-o-up"></i>
            <!-- <img class="like_icon" src="/icon/Like.svg" alt="" /> -->
            <img
              class="like_icon_red"
              src="@/assets/icon/Like_red.svg"
              alt=""
            />
          </div>
          <div class="like_num">{{ ArticleInfo.likeSum }}</div></a
        >
      </div>
      <div class="tools_item">
        <div class="tools_icon">
          <i class="fa fa-eye" :style="{ color: color }"></i>
          <!-- :class="{ red: isLiked, black: !isLiked }" -->
          <!-- <img src="@/assets/icon/Watch.svg" alt="" /> -->
        </div>
        <div>{{ ArticleInfo.watchSum }}</div>
      </div>
      <div class="tools_item edit">
        <a href="javascript:edit();">
          <div class="tools_icon">
            <img src="@/assets/icon/Write.svg" alt="" />
          </div>
          <div>编辑</div>
        </a>
      </div>
    </div>
  </Basic>
</template>

<script>
  import { onMounted, reactive, ref } from "vue";
  import router from "../../router";
  import { GetArticleById } from "../../api/ArticleApi";
  import Basic from "@components/basic/Basic.vue";
  import TopBanner from "@components/topbanner/TopBanner.vue";
  import MyNav from "@components/nav/MyNav.vue";

  const ArticleInfo = ref({});
  let color = ref({});
  export default {
    name: "Article",
    components: {
      TopBanner,
      MyNav,
      Basic,
    },
    setup() {
      GetArticleById(router.currentRoute.value.params.id).then((res) => {
        ArticleInfo.value = res;
      });
      return {
        ArticleInfo,
      };
      // router.currentRoute.value.params.id 获取文章id
      // console.log("获取文章id" + router.currentRoute.value.params.id);
    },
  };
</script>

<style scoped>
  /* 点赞样式 */
  /* .favorite {
    color: red;
  }
  .unfavorite {
    color: black;
  } */

  /* 文章部分样式 */
  .continer {
    margin: 0 auto;
    text-align: center;
  }

  .careateTime {
    padding: 12px 0;
  }

  .articleBody {
    padding: 0 20px;
    font-size: 23px;
    line-height: 30px;
    padding: 0 86px;
    text-align: left;
    padding-bottom: 120px;
  }

  /* tools 部分样式 */

  .tools {
    position: fixed;
    width: 50px;
    height: 300px;
    top: calc((100vh - 310px) / 2);
    right: calc((100vw - 1200px) / 2 - 78px);
  }

  .tools_icon {
    width: 48px;
    height: 48px;
    background-color: #ffffff;
    border-radius: 50%;
    position: relative;
    margin-top: 20px;
    box-shadow: #cccccc 0px 2px 10px 0px;
  }

  /* icon大小 */

  .tools_item img {
    width: 28px;
    height: 28px;
    position: absolute;
    margin-left: 10px;
    margin-top: 10px;
  }
  .tools_item i {
    width: 28px;
    height: 28px;
    font-size: 28px;
    position: absolute;
    margin-left: 10px;
    margin-top: 10px;
  }

  .tools_item div:last-child {
    margin-top: 4px;
    text-align: center;
  }

  /* 点赞图标 */

  /* 默认状态 */

  .like_icon {
    display: block;
  }

  /* 点赞后为红色图标 */

  .like_icon_red {
    display: none;
  }

  /* 编辑按钮 */

  .edit {
    display: none;
  }

  /* 亮色标题 */

  .part_title {
    font-size: 36px;
    margin-top: 81px;
    padding-bottom: 8px;
  }

  .part_decoration {
    margin: 0 auto;
    position: relative;
    padding-bottom: 40px;
  }

  .part_decoration img {
    position: absolute;
    left: 50%;
    margin-left: -125px;
    /* margin-top: 17px; */
    width: 250px;
    height: 15px;
  }
</style>
